//搜索框部分
<template>
  <div class="box">
    <div class="top">
      <img class="img" src="@/assets/index-3.png" />
      <p class="top-text">百科查询</p>
      <br />
      <!-- v-model.trim取出前后空格；@keyup.enter键盘回车事件 -->
      <input type="text" v-model.trim="str" @keyup.enter="btn" class="input" id="text" />
      <button class="btn" @click="btn">搜索</button>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data() {
    return {
      str: "",
    };
  },
  methods: {
    btn() {
      if (this.str != "") {//输入框不为空时
        this.$store.commit("searchStr", this.str);//存储要搜索的字符串
         //页面跳转，并携带参数，搜索的字符串，用于搜索病害详情
        this.$router.push({
          path: "/search/search3",
          query: {
            context: this.str,
          },
        });
      } else {
         this.$message({
          message: '输入框不能为空',
          type: 'warning'
        });
      }
    },
  },
};
</script>
<style scoped>
.box {
  width: 1100px;
  /* height: 1100px; */
  background-color: rgb(255, 255, 255);
  margin-top: -90px;
}
.top {
  width: 1100px;
  height: 200px;
  background-color: rgb(209, 231, 210);
  /* margin-left: 300px; */
  position: relative;
}

.img {
  width: 1100px;
  height: 200px;
  position: absolute;
}

.top-text {
  width: 141px;
  height: 30px;
  color: rgb(69, 99, 38);
  font-size: 30px;
  display: inline-block;
  /* margin-left: 480px; */
  /* left: 30px; */
  /* margin-right: 300px; */
  position: absolute;

  /* top: -00px; */
  /* top: 10px; */
  margin-left: 700px;
  /* margin-top: -700px; */
}
.input {
  width: 300px;
  height: 25px;
  margin-left: 360px;
  position: absolute;
  left: 200px;
  top: 100px;
}
.btn {
  width: 60px;
  height: 30px;
  margin-left: 27px;
  background-color: rgb(84, 146, 75);
  position: absolute;
  left: 860px;
  top: 100px;
  color: aliceblue;
  border: 0px;
}
</style>
